<template>
    <div class="cms-comment">
        <h3>发表评论</h3>
        <hr>
        <textarea placeholder="请输入要评论的内容(最多120个字)" maxlength="120" v-model="msg"></textarea>
        <mt-button type="primary" size="large" @click="postComments"> 发表评论</mt-button>
        <div class="cmt-list">
            <div class="cmt-item" v-for="(item,i) in comments" :key="item.i">
                <div class="cmt-title">
                    第{{i+1}}楼&nbsp;&nbsp;用户:{{item.user_name}}&nbsp; &nbsp;发表时间:{{item.add_time | dateFormat}}
                </div>
                <div class="cmt-body">
                    {{item.content ==='undefined' ? '此用户很懒，啥也没说': item.content}}
                </div>

            </div>
        </div>


        <mt-button type="primary" size="large" plain @click="getMore"> 加载更多</mt-button>
    </div>
</template>

<script>
    import {Toast} from 'mint-ui'

    export default {
        data() {
            return {
                pageindex: 1,
                comments: [],
                msg: ''
            }
        },
        created() {
            this.getComments()
        },
        methods: {
            getComments() {
                this.$http.get("api/getcomments/" + this.id + "?pageindex=" + this.pageindex)
                    .then(result => {
                        console.log(result.data.message);
                        if (result.body.status === 0) {
                            // this.comments = result.data.message
                            // 老数据拼接新数据
                            this.comments = this.comments.concat(result.data.message)

                        } else {
                            Toast("失败")
                        }
                    });
            },
            getMore() {
                this.pageindex++;
                this.getComments()
            },
            postComments() {

                // 校验
                if (this.msg.trim().length === 0) {

                    return Toast('您没有输入任何内容，无效提交')
                    // 后面代码不在完成
                }
                // 发表评论
//                 参数一：请求的url地址
//                 参数二：提交给服务器的数据对象 {content:this.msg}
                // 参数三：定义提交的时候，表单中的数据格式
                this.$http.post('api/postcomment/' + this.$route.params.id, {content: this.msg.trim()})
                    .then(result => {
                        if (result.body.status === 0) {
                             // 1:拼接处一个评论对象
                            var cmt = {user_name:'匿名用户',add_time:Date.now(),content:this.msg.trim()};
                            this.comments.unshift(cmt)
                            this.msg = ''
                        }
                    })

            }
        },
        props: ["id"]
    }
</script>

<style lang="less" scoped>
    .cms-comment {
        textarea {
            margin: 0;
        }

        .cmt-title {
            padding: 5px;
            background-color: #f0f0f0;
        }

        .cmt-body {
            padding: 10px;
        }
    }
</style>